<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">闸机设备A342</block>
			<text slot="right" style="font-size: 28rpx;margin-right: 1em;">ID:1231</text>
		</cu-custom>
		<checkbox-group>
			<!-- 左侧显示略缩图、图标 -->
			<uni-list>
				<picker :value="locationIndex" @change="bindPickerChange" :range="locationArray">
					<uni-list-item title="地点标签" :rightText="locationArray[locationIndex]"></uni-list-item>
				</picker>
				<uni-list-item title="应用场景选择" :showArrow="false" :isFirstChild="true">
					<template #right>
						<checkbox class="checkbox" value="i" checked="i">门禁</checkbox>
						<checkbox class="checkbox" value="i" checked="i">考勤</checkbox>
						<checkbox class="checkbox" value="i" checked="i">会议</checkbox>
					</template>
				</uni-list-item>
				<uni-list-item title="使用人" :showArrow="false">
					<template #right>
						<checkbox class="checkbox" value="i" checked="i">老师</checkbox>
						<checkbox class="checkbox" value="i" checked="i">学生</checkbox>
					</template>
				</uni-list-item>
				<uni-list-item title="是否重新下发人脸" :showArrow="false">
					<template #right>
						<checkbox class="checkbox" value="i" checked="i">是</checkbox>
						<checkbox class="checkbox" value="i" checked="i">否</checkbox>
					</template>
				</uni-list-item>
				<uni-list-item :showArrow="false">
					<button type="primary" style="width: 70%;border-radius: 999rpx;">保存设置</button>
				</uni-list-item>
			</uni-list>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				locationArray:["啊实打实的","的撒大苏打"],
				locationIndex:0
			}
		},
		methods: {
			bindPickerChange({detail:{value}}) {
				this.locationIndex = value;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.checkbox {
		font-size: 28rpx;
		margin-left: 1em;
	}
</style>
